<template>
    <div class="g-swiper">
        <swiper :options="swiperOption" v-if="showSwiper">
            <!-- slides -->
            <swiper-slide v-for="item of list" :key="item.id">
                <img  class="swiper-img" :src="item.img_src" alt="">
            </swiper-slide>
            <!-- <swiper-slide >
                <img  class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1808/72/7686b894b4e51902.jpg_750x200_065fb667.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img  class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/3c/c72a1ccd4d7b2202.jpg_750x200_b88bbab4.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img  class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/23/ecfe9185a5f8f702.jpg_750x200_73209fe0.jpg" alt="">
            </swiper-slide> -->
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <!-- 左右按钮 -->
            <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
            <!-- <div class="swiper-button-next" slot="button-next"></div> -->
            <!-- 滚动条 -->
            <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
        </swiper>
    </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: '2000'
      }
    }
  },
  computed: {
    // 如果有数据就显示swiper组件(解决默认载入到最后一张图片问题)
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
    .g-swiper >>> .swiper-pagination-bullet-active
        background #fff
    .g-swiper
        overflow hidden
        width 100%
        height 0
        padding-bottom 26.7%
        background:#ccc
        .swiper-img
            width 100%

</style>
